<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电灯开关案例</title>
		<style>
			div {
				width: 300px;
				margin: 12px auto;
				text-align: center;
				background-color: lightcyan;
			}
			
			input {
				border-radius: 10px;
				outline: none;
			}
		</style>
		<script>
			var flag = false;//默认关灯
			
			function switchLight(obj) {
				var img = document.getElementById("im");
				var span = document.getElementById("sp");
				if (!flag) {
					// 1.开灯 -- 切换图片
					img.src = "../img/on.gif";
					obj.style = "background-color: pink;";
					obj.value = "关灯";
					span.innerHTML = "<b>灯被打开了</b>";
				} else {
					img.src = "../img/off.gif";
					obj.style = "background-color: lightblue;";
					obj.value = "开灯";
					span.innerHTML = "<b>灯已经关了</b>";
				}
				flag = !flag;
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="开灯" onclick="switchLight(this)" /><br /><br />
			<img id="im" src="../img/off.gif" /><br /><br />
			<span id="sp"><span>
		</div>
	</body>
</html>
